<title>考勤统计</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
        <a><cite>减灾司</cite></a>
        <a><cite>数据统计</cite></a>
    </div>
</div>

<div class="layui-fluid custom-attendance-page">
    <div class="attendance-top">
        <div class="layui-card">
            <div class="layui-card-body">  
                <form class="layui-form" lay-filter="attendance-form-filter" id="custom-attendance-form">  
                    <div class="layui-form-item"> 
                        <div class="layui-input-block radioBox">
                            <input type="radio" name="model" value="year" title="按年份" checked="">
                            <input type="radio" name="model" value="dept" title="按单位"> 
                        </div>
                    </div>
                    <div class="formItemBox">
                        <span>按表单项：</span> 
                        <div class="layui-form-item layui-inline layui-leave-checkboxs"  id="state-box2">
                           
                        </div> 
                    </div> 
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <button type="reset" class="layui-btn layui-btn-normal layui-btn-task bgColor layui-hide" data-target="reset">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="attendance-bottom">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="layui-inline">
                    <button type="button" class="layui-btn bgBlue layui-btn-export T-btn" data-target="export">导出数据</button>
                    <button type="button" lay-submit class="layui-btn layui-btn-query" lay-filter="custom-query-filter">查询</button>
                </div>
                
            </div>
            <div class="layui-card-body">
                <table id="depart-table" lay-filter="custom-depart-filter"></table>
            </div>
        </div>
    </div>
</div>

<!-- 请假状态模板 -->
<script type="text/html" id="state">
    {{# if(d.data && d.data.length > 0){ }}
        {{# layui.each(d.data, function(index, item){ }}
            <input type="checkbox" name="state-{{item.value}}" value="{{item.key}}" {{item.key === "all" ? 'lay-filter="layui-checkAll-filter"' : 'lay-filter="layui-check-filter"'}}  title="{{item.value}}" lay-skin="primary"> 
        {{# }); }}
    {{# } }}
</script>

<!-- 单位模板 -->
<script type="text/html" id="depart">
    {{# if(d.data && d.data.length > 0){ }}
        {{# layui.each(d.data, function(index, item){ }}
            <option value="{{item.id}}">{{item.full_name}}</option>
        {{# }); }}
    {{# } }}
</script>

<style>
    .formItemBox .layui-leave-checkboxs{
        padding-left: 0px;
    }
    .attendance-top .layui-inline{
        /* margin-right: 60px; */
        width: 90%;
    }
    .layui-leave-checkboxs{
        padding-left: 84px;
    }
    .attendance-bottom{
        margin-top: 20px;
    }
    .attendance-bottom .layui-card{
        height: 646px;
    }
    .layui-btn-export{
        width: 96px;
        height: 30px;
        line-height: 30px;
        font-weight: 600;
        padding-left: 31px;
        color: #FFFFFF;
        cursor: pointer;
        background: url('/dist/style/res/formFill/form-submit.png') no-repeat #2669B1;
        background-position: 7px 5px;
    }
    .layui-btn-query{
        width: 71px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        text-align: right;
        background: url('../../dist/style/res/formFill/search.png') no-repeat 10px center;
        background-color: #77AF6F;
    }
    .attendance-top .layui-input-block{

        margin-left: 82px;
    }
    .attendance-bottom .layui-input-block{
        line-height: 38px;
    }
    .attendance-bottom .layui-card-header{
        padding-left: 60px;
    }
    .layui-table td{
        vertical-align: middle;
        text-align: center;
    }
    .highlight-text{
        cursor: pointer;
        color: green;
        border-bottom: 1px dashed green;
    }
    .voca-time{
        margin: 0 10px;
    }
</style>

<script> 
    layui.use(['admin', 'form', 'table', 'laytpl', 'laydate', 'tools'], function(){
        var admin = layui.admin,
            form = layui.form,
            table = layui.table,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            tools = layui.tools;
        
        form.render(null, 'attendance-form-filter');

        var allVoca = [],
            allCheck = [],
            layout = ['.layui-table th', '.layui-table td', '.layui-form-checkbox span', '#custom-attendance-form', '.attendance-bottom .layui-card-header','.layui-form-item span','.layui-form-radio div'];
 
        initState()  

        //初始化状态
        function initState(){
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/GetStatisticsFields',
                done: function(res){  
                        if(res.data.retcode == 0){
                            var html = '';
                            allVoca = res.data.data;
                            allVoca.unshift({value: '全选', key: 'all'});
                            if(allVoca && allVoca.length > 0){
                                layui.each(allVoca, function(index, item){
                                    html += '<input type="checkbox" name="state-'+item.value+'" value="'+item.key+'"  '+(item.key=="all" ? "lay-filter='layui-checkAll-filter'" : "lay-filter='layui-check-filter'")+' title="'+item.value+'" lay-skin="primary">'
                                });
                            }
                            // $('#state-box').html(html);  
                            $('#state-box2').html(html);
                            //默认全选
                            form.render('checkbox', 'attendance-form-filter');  
                            $("#state-box2 div").eq(0).click();  
                            
                              //初始化加载 
                            var symbol=[]; 
                            $.each($("#state-box2 input[lay-filter='layui-check-filter']"),function(index,item){ 
                                symbol.push({ key: $(item).val(), value: $(item).attr("title") })
                            });  
                            initTable(symbol);  
                        } 
                }
            })    
           
        }   

        //加载数据表格
        function initTable(symbol){  
            var fields=[]
            var textRadio= $(".radioBox .layui-form-radioed div").text();
            for(var i=0;i<symbol.length;i++){
                fields.push(symbol[i].key);
            }
            var symbol = symbol || [],
                deptId = deptId || '',
                name = name || '',
                colls = [];
            colls = getTableHead(symbol);  
            colls.unshift({ type: 'numbers', title: '序号', width: 44 }); 
            table.render({
                elem: '#depart-table',
                method: 'post',
                url: 'myapi/DC/api/rest/web/custom/DisasterStatistics',
                where: {
                    fields:fields.join(","),  
                    model:$(".radioBox").find("input[title="+textRadio+"]").val(), 
                    access_token: layui.data('layuiAdmin').access_token
                },
                height: 560,
                even: true,
                text: {
                    none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                },
                // page: {
                //     groups: 1, 
                //     limit: 10,
                //     next:'<i class="layui-icon">&#xe602;</i>',
                //     prev:'<i class="layui-icon">&#xe603;</i>',
                //     first: '<i class="layui-icon">&#xe65a;</i>',
                //     last: '<i class="layui-icon">&#xe65b;</i>',
                //     layout: ['refresh', 'first', 'prev', 'skip', 'count', 'allPage', 'next', 'last'],
                //     extend:{
                //         first: true, //是否显示首页
                //         spr: false,//是否显示页码分页符号 默认显示
                //         pagecount: true//页码是否显示总数  groups=1时才有效
                //     }
                // },
                page:false,
                request: {
                    limitName: 'count'
                },
                parseData: function(res){ 
                    var data = res.data,
                        userList = data.data || [];
                    if(userList && userList.length > 0){
                        layui.each(userList, function(index, item){
                            var vocData = item.data;
                           if(vocData){
                                for(var i in vocData){
                                    item[i] = vocData[i].count
                                }
                            }
                        })
                    } 
                    return {
                        "code": data.retcode, //解析接口状态
                        "msg": data.retmsg, //解析提示文本
                        // "count": data.data[0].totalNumber, //解析数据长度
                        "data": userList //解析数据列表
                    };

                },
                cols: [colls],
                done: function(res, curr, count){
                    tools.setFont(layout);
                }
            });
        }
        
        //获取表格头部
        function getTableHead(symbol){
            var fields=[];
            var textRadio= $(".radioBox .layui-form-radioed div").text();  
            for(var i=0;i<symbol.length;i++){
                fields.push(symbol[i].key);
            }
            var symbol = symbol || [],
                deptId = deptId || '',
                name = name || '';
            var ajaxData = admin.req({
                url: 'myapi/DC/api/rest/web/custom/DisasterStatistics',
                type: 'post',
                async: false,
                data: {
                    fields: fields.join(","), 
                    model:$(".radioBox").find("input[title="+textRadio+"]").val(),
                    access_token: layui.data('layuiAdmin').access_token
                }
            });  
            var fields=ajaxData.responseJSON.data.fields; 
            window.FormData = ajaxData.responseJSON.data.data;
            var colsss=[];
            for(var i=0;i<fields.length;i++){
                var eachField=fields[i]; 
                var width=""; 
                if(eachField.column_name=="yeartime"){
                    width=100 
                }else if(eachField.column_name=="dept_name"||eachField.column_name=="totalNumber"){
                    width=160
                }else{
                    width=eachField.column_comment.length*20
                } 
                (function(i){
                    colsss.push({
                    field:eachField.column_name,
                    title:eachField.column_comment, 
                    align:'center',  
                    width:width,  
                    templet: function(d){  
                        return '<span lay-tips="'+ d[fields[i].column_name] +'">'+ d[fields[i].column_name] +'</span>' 
                    }
                })
                })(i);
                
            } 
            return colsss
        }

        //监听查询
        form.on('submit(custom-query-filter)', function(data){ 
            var field = data.field,
                symbol = [],
                username = field.username || '';
            if(field["state-全选"]){delete field["state-全选"]}
            for(var i in field){
                if(i.indexOf('state') != -1){
                    symbol.push({ key: field[i], value: i.substr(6) })
                }
            }
            initTable(symbol);
        })

        //监听全选框
        form.on('checkbox(layui-checkAll-filter)', function(data){ 
            var checked = data.elem.checked,
                othis = data.othis,
                val = {},
                tempArr = JSON.parse(JSON.stringify(allVoca));
            if(checked){
                layui.each(tempArr, function(index, item){
                    if(item.key == 'all'){
                        tempArr.splice(index, 1);
                    }
                })
                layui.each(allVoca, function(index, item){
                    val['state-'+item.value] = item.key;
                })
                allCheck = tempArr;
            }else{
                allCheck = []; 
                $('.layui-btn-task').trigger('click')
            } 
            form.val('attendance-form-filter', val);
        })

        //监听子复选框复选
        form.on('checkbox(layui-check-filter)', function(data){
            var checked = data.elem.checked,
                value = data.value,
                elem = data.elem;
            if(checked){
                allCheck.push({ key: value, value: elem.title });
            }else{
                layui.each(allCheck, function(index, item){
                    if(item.key == value){
                        allCheck.splice(index, 1);
                    }
                })
            }
            if(allCheck.length == allVoca.length-1){
                form.val('attendance-form-filter', {
                    'state-全选': 'all'
                });
            }else{
                form.val('attendance-form-filter', {
                    'state-全选': ''
                });
            }
        })

        //点击事件
        $('.custom-attendance-page').delegate('.T-btn', 'click', function(){
            var target = $(this).data('target');
            switch(target){
                case 'fieldMsg':
                    var textJson = JSON.parse(JSON.stringify($(this).data('text'))),
                        html = '<div class="layui-card-body"><ul class="custom">';
                    if(textJson){
                        layui.each(textJson, function(index, item){
                            html += '<li>'+
                                        '<span>'+item.dept_name+'-'+item. writeusername+'</span>'+
                                        '<span class="voca-time">'+item.time+'</span>'+
                                        '<span>'+(item.time_sort == "1" ? "上午" : "下午")+'</span>'
                                    '</li>'
                        })
                        html += "<ul></div>"
                        layer.open({
                            id: 'vocationHtml',
                            title:'<i class="formFill-icon"></i><span style="color:#FFF;">考勤情况</span>',
                            offset: '110px',
                            type: 1,
                            shadeClose: true,
                            area: ['350px', '400px'],
                            resize: false,
                            content: html
                        })
                    }else{
                        layer.msg('暂无考勤情况', {time: 1500});
                    }
                    break;
                case 'export': 
                    var formdata = window.FormData; 
                    if(formdata && formdata.length > 0){
                        var sheet = [];
                        // layui.each(formdata, function(index, item){
                        //     var obj = {};
                        //     obj.formname ="统计信息";
                        //     obj.header = JSON.stringify(tools.getSerachData('depart-table', 'thead'));
                        //     obj.data = JSON.stringify(tools.getSerachData('depart-table', 'searchBodyData'));
                            
                        //     sheet.push(obj);
                        // }); 
                        var obj = {};
                            obj.formname ="统计信息";
                            obj.header = JSON.stringify(tools.getSerachData('depart-table', 'thead'));
                            obj.data = JSON.stringify(tools.getSerachData('depart-table', 'searchBodyData'));
                            
                        sheet.push(obj);
                        var url = 'myapi/DC/api/rest/web/custom/taskExcelDataDownload';
                        tools.downLoadfunction(url,{
                            taskname: "统计信息",
                            sheets: JSON.stringify(sheet), 
                            access_token: layui.data('layuiAdmin').access_token
                        });
                    }else{
                        layer.msg('没有需要导出的数据', {time: 1000});
                    } 
                    break;
                default:
                    break;
            }
        })
        
        //查询绑定键盘事件
        $(document).keydown(function(e){ 
            if(e.keyCode == '13'){
                $('.layui-btn-query').click();
            }
        })
    })

</script>